<template>
  <div>
    <labelNavigation></labelNavigation>
    <el-main>
      <div class="hezi2">
        <div class="title-left">
          <img class="tubiao" src="./images/03.png" />
          <div class="banji">班级管理</div>
          <div class="TeatherName">{{info}}老师的班级</div>
        </div>

        <div class="sousuolan">
          <input class="search">
          <button class="look">搜索</button>
        </div>
      </div>
      <div class="gender">
        <div v-for="(item, index) in gradeList" :key="index" @click="curIndex=index">
          <div class="gender1" @click="changeGrade(item)" :class='{genderClick:curIndex==index}'>{{ item }}</div>
        </div>
        <!-- <div class="gender2">一年级3班</div> -->
      </div>
      <div class="chengji">
        <el-button class="xiazai" @click="getclass()">获取成绩下载模板</el-button>
        <el-upload class="avatar-uploader" action="/dev-api/studentScore/importData" :headers="token">
          <img v-if="AddSubmenuData.imageUrl" :src="AddSubmenuData.imageUrl" class="avatar" />

          <el-button class="score">导入成绩</el-button>
        </el-upload>
      </div>
      <div class="middle">
        <!--这个是头像和姓名和性别在一个框里的盒子-->
        <div v-for="(item, index) in stuList" :key="index" class="person" @click="GotoGrowth(item)">
          <div class="person1">
            <p class="name">{{ item.stuName }}</p>
            <div class="boy" :class="item.sex==0?'boy':'girl'">
              <template v-if="item.sex==0">
                <span>👦</span>
                <span>男孩</span>
              </template>
              <template v-else>
                <span>👧</span>
                <span>女孩</span>
              </template>
            </div>
          </div>
          <div class="img-box">
            <img :src="`${ src1 + item.avatar }`" v-if="item.avatar!=''">
            <img src="@/assets/images/boy.png" v-if="item.sex==0&&item.avatar==''">
            <img src="@/assets/images/girl.png" v-if="item.sex==1&&item.avatar==''">
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import module from "@/allurlimg/img"
import { getGradeId } from "@/api/luoc.api/luo1.js";
import { getstudentImation } from "@/api/luoc.api/luo1.js";
import labelNavigation from "../../../components/background/labelNavigation1";
import { getToken } from '@/utils/auth.js'
import {
  getclassId,
  getRport,
  myInfo,
} from "@/api/luoc.api/luo4.js";
export default {
  data () {
    return {
      curIndex: 0,
      token: {},
      studentId: [],
      gradeId: "",
      data: [],
      //学生列表
      stuList: [],
      gradeList: [],
      src1: "",
      AddSubmenuData: {
        id: "",
        pid: "",
        funType: 1,
        name: "",
        sort: "",
        SystemCoding: "",
        remarks: "",
        imageUrl: "",
      },
    };
  },

  mounted () {
    this.src1 = module.host
    this.gets()
    const flag = true
    localStorage.setItem("flag", flag)
    window.onbeforeunload = function (e) {
      var storage = window.localStorage;
      storage.clear()
    }
  },

  components: {
    labelNavigation,
  },

  methods: {
    // 获取图片信息并转成base64
    handleChange (file, fileList) {
      let reader = new FileReader();
      let fileResult = "";
      console.log(file);
      reader.readAsDataURL(file.raw);
      reader.onload = function () {
        fileResult = reader.result;
      };
      reader.onloadend = function () {
        this.AddSubmenuData.imageUrl = fileResult;
      };
    },

    async getGradeId () {
      const res = await getGradeId({});
      //传参这里也需要对应
      console.log(res);
      console.log(res.data);
      this.gradeList = res.data;
      this.gradeId = res.data[0];
      this.getclassStudents();
      console.log(this.gradeId);
    },
    //以下是需要gradeId的值才可进行获取数据，具体的gradeId还得先再去获取postId
    async getclassStudents () {
      const res = await getstudentImation({ gradeId: this.gradeId });
      //传参这里也需要对应
      console.log(res);
      console.log(res.data);
      this.stuList = res.data;
      console.log(this.stuList)
      // this.studentId=res.rows[0]
      // console.log(this.studentId)
    },
    async getclass () {
      this.download(
        "/studentScore/importTemplate",
        {},
        `score_classStudent${new Date().getTime()}.xlsx`
      );
    },

    GotoGrowth (e) {
      console.log(e);
      this.stuMessage = e;
      localStorage.setItem("stuMessage", JSON.stringify(this.stuMessage))
      this.$router.push({
        path: "/reportluo",
        query: { stuMessage: this.stuMessage },
      });
      this.getthisclassId(e)
    },
    async getthisclassId (e) {
      // console.log(e)
      const res = await getclassId(e.stuId); //传参这里也需要对应
      const res2 = await getRport({ stuId: e.stuId });
      const reportList = res2.data.reverse()
      const reportListmake = reportList[0]
      console.log(this.reportListmake)
      localStorage.setItem("reportListmake", JSON.stringify(reportListmake))
      console.log(res)
      let data = res.data;
      localStorage.setItem("stuList", JSON.stringify(data))
    },
    changeGrade (e) {
      console.log(e);
      this.gradeId = e;
      console.log(this.gradeId);
      this.getclassStudents();
    },
    //获取教师信息
    async gets () {
      const res = await myInfo();
      console.log(res, 'qweqwe')
      for (const key in res.data) {
        console.log(res.data[key])
        this.info = res.data[key][0]
      }
    },
  },
  created () {
    this.token = {
      Authorization: 'Bearer ' + getToken()
    }
    //挂载保存
    this.getGradeId();
    // console.log(this.gradeId)
    this.getthisclassId();
  },
};
</script>

<style scoped>
/*页面中间内容标签*/
.box {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 0.625rem;
  width: 100%;
  height: 50rem;
}

.chengji {
  display: flex;
  flex-direction: row-reverse;
  /* margin-left: 65rem; */
}

.gander2 {
  width: 3.75rem;
  height: 1.875rem;
}

/*上面的翻页和文字一起的盒子*/
.word {
  display: flex;
}
/*页面下半部分的内容*/
.Info {
  display: flex;
  margin-top: 3.125rem;
}
/*成长报告相关页面*/
.Picture {
  display: flex;
  margin-left: 1.625rem;
}
/*学年学期*/
.year {
  margin-top: 3.25rem;
  margin-left: 2.4375rem;
  font-size: 2.375rem;
  font-weight: 43.75rem;
}
/*文字制作中 */
.make {
  background-color: #f2e5e5;
  width: 5.375rem;
  height: 2.25rem;
  font-size: 0.625rem;
  line-height: 2.25rem;
  margin-left: 2.4375rem;
  margin-top: 1.875rem;
  border-radius: 0.3125rem;
}
/*导出相册按钮 */
.gomake {
  background-color: #101010;
  width: 9.625rem;
  height: 2.875rem;
  font-size: 0.625rem;
  line-height: 2.875rem;
  margin-left: 2.4375rem;
  margin-top: 3.125rem;
  color: #d9d6d9;
  border-radius: 0.3125rem;
}

.TeatherName {
  margin-top: 1.25rem;
  margin-left: 0.625rem;
  font-size: 1.25rem;
}
/*导出pdf按钮 */
.pdf {
  background-color: #ffffff;
  width: 9.625rem;
  height: 2.875rem;
  font-size: 0.625rem;
  line-height: 2.875rem;
  margin-left: 0.3125rem;
  margin-top: 3.125rem;
  color: #101010;
  border-radius: 0.3125rem;
}
/*包按钮盒子*/
.btnBox {
  display: flex;
}

/*一个模本盒子*/
.picture1 {
  width: 13.75rem;
  height: 19.375rem;
  background-color: #101010;
  position: relative;
}

.picture {
  width: 13.75rem;
  height: 19.375rem;
  background-color: #101010;
  margin-left: 1.0625rem;
}

/*右边的文本框 */
.right {
  display: flex;
  flex-direction: column;
}
/* 放翻页书的盒子*/
.word .flash {
  background-color: #333;
  width: 31.25rem;
  height: 17.25rem;
  margin-left: 14.375rem;
  margin-top: 2.875rem;
}
/*向左滑动图标 */
.lefticon {
  margin-left: 10.375rem;
  margin-top: 9.375rem;
}
/*向右滑动图标 */
.righticon {
  margin-left: 2.5rem;
  margin-top: 9.375rem;
}

.el-main {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 0.625rem;
  width: 70%;
  margin: 0 auto;
}

.hezi2 {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5625rem;
}
.title-left {
  margin-bottom: 1rem;
  display: flex;
}
.tubiao {
  height: 2.8125rem;
  width: 2.8125rem;
}

.person {
  display: flex;
  cursor: pointer;
  border-radius: 5px;
  padding: 0.3125rem 0.625rem;
  border: 1px solid #dad7d7;
  margin: 1.625rem 0 0 4rem;
}
.person:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.middle {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2rem;
}

.person1 {
  margin-right: 0.4rem;
  text-align: left;
  line-height: unset;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.person .img {
  margin-top: 0.5625rem;
}

.gander {
  width: 3.75rem;
  height: 1.875rem;
}

.person1 .img {
  border-radius: 50%;
  height: 4.125rem;
  width: 4.125rem;
}
.img-box {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.img-box > img {
  width: 100%;
  height: 100%;
}
.touxiang {
  border-radius: 50%;
  height: 4.125rem;
  width: 4.125rem;
  margin-bottom: 3.375rem;
}

.search {
  width: 15.625rem;
  height: 2.75rem;
  /* margin-left: 27.3125rem; */
  background-color: #f5f5f5;
  border: #f5f5f5;
}

.look {
  width: 5.6875rem;
  height: 2.75rem;
  background: #7c0000;
  color: #ffffff;
  border: #7c0000;
}

.gender {
  display: flex;
  /* margin-left: 14.0625rem; */
}

.gender1 {
  cursor: pointer;
  padding: 0.5rem 2.4rem;
  margin-top: 0.3125rem;
}
.genderClick {
  position: relative;
  /* border-bottom: 0.3125rem solid#7c0000; */
}
.genderClick::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 1.25rem);
  height: 4px;
  width: 2.5rem;
  background-color: #7c0000;
}

/* 性别信息 */
.boy {
  font-size: 12px;
  border-radius: 5px;
  padding: 6px 7px;
  color: #5f9eed;
  background: #e4f0fe;
  align-items: center;
}

.girl {
  color: #ed8c5f;
  background: #fef1e4;
}

.el-footer {
  background-color: #000000;
  text-align: center;
  line-height: 3.75rem;
  width: 100%;
  height: 4.0625rem;
  display: flex;
}
.wenzi {
  width: 3rem;
  height: 1.5rem;
  color: #f7f7f7;
  font-size: 0.75rem;
  margin-left: 14.375rem;
}
.wenzi2 {
  width: 3rem;
  height: 1.5rem;
  color: #f7f7f7;
  font-size: 0.75rem;
  margin-left: 1.25rem;
}

.wenzi3 {
  width: 14.5rem;
  height: 1.5rem;
  color: #575757;
  font-size: 0.75rem;
  margin-left: 36.375rem;
}

.daohang {
  margin-left: 38rem;
}

.banji {
  margin-top: 0.9375rem;
  font-size: 2.1875rem;
}

.el-main .hezi {
  display: flex;
}

.el-header .tupian {
  margin-top: 1.25rem;
  margin-left: 14.375rem;
}
.el-header .fit {
  margin-left: 0.9375rem;
  background-color: #ffffff;
  border: 0.1875rem solid #ffffff;
  border-bottom: 0.25rem solid #7c0000;
}
.el-header .btn {
  margin-left: 0.9375rem;
  background-color: #ffffff;
  border: 0.1875rem solid #ffffff;
  border-bottom: 0.25rem solid #7c0000;
}

.el-main .hezi .btn2 {
  width: 6.25rem;
  height: 1.875rem;
  border: 0.125rem solid #ffffff;
  background-color: #f2e5e5;
  border-radius: 1.5625rem;
  font-size: 0.625rem;
}

.btn5 {
  margin-left: 0.9375rem;
  background-color: #ffffff;
  border: 3px solid #ffffff;
  color: #7c0000;
  border-bottom: 0.125rem solid #7c0000;
}

.score {
  margin-left: 3.125rem;
  border: 0.0625rem solid#e3e3e3;
  background-color: #fff;
  border-radius: 10%;
}

.hezi2 .sousuolan {
  /* margin-left: 23.75rem; */
}

/*上传excel文件的导入成绩*/
.avatar-uploader .el-upload {
  border: 0.0625rem dashed #d9d9d9;
  border-radius: 0.375rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 5rem;
  margin-bottom: 1.375rem;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 1.75rem;
  color: #8c939d;
  width: 11.125rem;
  height: 11.125rem;
  line-height: 11.125rem;
  text-align: center;
}
.avatar {
  width: 11.125rem;
  height: 11.125rem;
  display: block;
}
.xiazai {
  margin-left: 1rem;
}
</style>
